<template>
  <PageContainer>
    <Header title="产品详情" />
    <view class="container hb-p-4">
      <view class="hb-p-4 hb-box-shadow-base hb-bg-white hb-rounded-xl">
        <swiper :circular="true" :autoplay="true" :interval="3000" :indicator-dots="true" class="hb-h-[600rpx]">
          <swiper-item v-for="item in productDetail.imagesList" :key="item">
            <TImage :src="item" height="600rpx" width="100%" border-radius="16rpx" :preview="true" />
          </swiper-item>
        </swiper>
        <view class="hb-flex hb-flex-col hb-gap-4 hb-mt-4">
          <text class="hb-text-[32rpx] hb-leading-6 hb-font-bold hb-text-[#646566] hb-break-all">
            {{ productDetail.name }}
          </text>
          <text class="hb-text-sm hb-text-[#646566]">{{ productDetail.description }}</text>
        </view>
      </view>
      <BottomSubmit submitBtnLabel="跳转产品链接" @submit="handleProductLink" />
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  import { getBotProductServiceCardById } from '@/api/card';
  import { ProductInfo } from '@/api/card/type';

  /* productDetail 产品详情 */
  const uuid = ref<string>('');
  customOnload<'ProductDetail'>((options) => {
    uuid.value = options.uuid;
    getProductDetail();
  });

  const productDetail = reactive<ProductInfo>({} as ProductInfo);

  const getProductDetail = async () => {
    const res = await getBotProductServiceCardById(uuid.value);
    productDetail.name = res.name;
    productDetail.description = res.description;
    productDetail.imagesList = res.imagesList;
    productDetail.linkType = res.linkType;
    productDetail.link = res.link;
  };

  const handleProductLink = () => {
    wx.navigateToMiniProgram({
      shortLink: productDetail.link,
    });
  };
</script>

<style lang="scss" scoped></style>
